<template>
    <div class="videoShow">
        <el-button @click="back" type="info">返回</el-button>
        <video :src="video" controls></video>
        <!-- 添加一个绝对定位的播放按钮 -->
        <div class="play-button" @click="playVideo">
            <i class="el-icon-play"></i> <!-- 使用Element UI的播放图标 -->
        </div>
    </div>  
</template>

<script setup>
import { onMounted, ref } from "vue"
import { useRoute, useRouter } from "vue-router"
const route = useRoute()
const router = useRouter()

useRouter
const back = () => {
    router.go(-1)
}
let video = ref(null)
onMounted(() => {
    video.value = route.query.videoPath
})
// 添加播放/暂停视频的方法
const playVideo = () => {
    const videoEl = document.querySelector('video')
    if (videoEl.paused) {
        videoEl.play()
    } else {
        videoEl.pause()
    }
}
</script>

<style lang="less" scoped>
.videoShow {
    width: 100%;
    height: 100%;
    display: flex;

    .el-button {
        margin-right: 20px;
    }
}

/* 播放按钮样式 */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 50%;
    // background-color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    z-index: 1;
}
</style>